首页手记 jQuery响应式弹出框与确认框

jQuery响应式弹出框与确认框

标签：

Html/CSS JQuery JavaScript

通过jQuery的extend插件功能写的一个弹出框提示功能，可替换浏览器自带的alert弹出框与confirm确认框。

插件调用方式：
1、引入jQuery
2、直接$.showDialog({参数信息});来显示
3、参数说明：

{type: "confirm", title: "title", okButtonText: "okButtonText", cancleButtonText: "cancleButtonText", okCallback: "okCallback", cancleCallback: "cancleCallback"}

type：类型，可为alert或者confirm
title：提示框内容
type为alert时可选参数：
buttonText:按钮内容，可选，默认为确定
callback:点击俺就调用函数，可选

type为confirm时可选参数：
okButtonText: 确认按钮文字，默认确定，可选
cancleButtonText：取消按钮文字，默认取消，可选
okCallback：点击确认按钮触发事件，可选
cancleCallback: 点击取消按钮触发事件，可选

<!DOCTYPE html>
<html lang="zh">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
    </head>
    <body>

    </body>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
    /**
     * 弹出框
     * {type: "alert", title: "title", buttonText: "buttonText", callback: "callback"}
     * {type: "confirm", title: "title", okButtonText: "okButtonText", cancleButtonText: "cancleButtonText", okCallback: "okCallback", cancleCallback: "cancleCallback"}
     */
    $.extend({
        showDialog: function(obj) {
            var type = obj.type || "alert";
            var title = obj.title;
            var content = "<div id='pop-div' style='position: fixed; z-index:999; top: 0; left: 0;width:100%; height:100%; background-color: rgba(0 ,0, 0, 0.2)'>";
            content += "<div style='position:relative; width: 90%; max-width: 400px; height: 140px;margin: 0 auto; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);transform: translateY(-50%);background-color: #fafafa;text-align: center;font-size: 16px'>";
            content += "<div style='height: 90px; border-bottom: 1px solid #E1E1E1;line-height: 90px; box-sizing: border-box'>" + title + "</div>";

            var button = "<div style='width: 100%; height: 40px;'>";
            switch(type) {
                case "confirm":
                    var okButtonText = obj.okButtonText || "确定";
                    var cancleButtonText = obj.cancleButtonText || "取消";
                    var button = "<span style='display:inline-block; width: 50%;height: 50px;border-right: 1px solid #E1E1E1; box-sizing: border-box;text-align: center;line-height: 50px;font-size: 16px' id='cancle'>" + cancleButtonText + "</span><span style='display:inline-block; width: 50%;height: 50px;text-align: center;line-height: 50px; color: orange;font-size: 16px' id='confirm'>" + okButtonText + "</span>";
                    break;
                case "alert":
                default:
                    var buttonText = obj.buttonText || "确定";
                    var button = "<span style='display:inline-block; width: 100%;line-height: 50px;color: orange;font-size: 16px' id='alert'>"+ buttonText +"</span>";
                    break;
            }
            button += "</div>";
            content += button;
            content += "</div>";
            content +="</div>";
            $("body").append(content);

            if (type == 'confirm') {
                var okCallback = obj.okCallback || undefined;
                var cancleCallback = obj.cancleCallback || undefined;
                $("#confirm").on("click", function() {
                    $("#pop-div").remove();
                    if(typeof okCallback == "function") {
                        okCallback();
                    }
                });
                $("#cancle").on("click", function() {
                    $("#pop-div").remove();
                    if(typeof cancleCallback == "function") {
                        cancleCallback();
                    }
                });
            } else if(type == 'alert') {
                var callback = obj.callback || undefined;
                $("#alert").click(function() {
                    $("#pop-div").remove();
                    if(typeof callback == 'function') {
                        callback();
                    }
                });
            }
        }
});
$.showDialog({title: "这只是一个测试", type: "confirm", okButtonText: "点我", buttonTitle: "", okCallback: function(){console.log("fgdfhfghfgjgf")}});
</script>
</html>

调用示例：
$.showDialog({title: "这只是一个测试", type: "confirm", okButtonText: "点我", buttonTitle: "", okCallback: function(){console.log("fgdfhfghfgjgf")}});
效果示例：